XHTML ডকুমেন্টে স্টাইলিং প্রয়োগ করার জন্য সাধারণত দুটি পদ্ধতি ব্যবহৃত হয়: স্টাইল ট্যাগ (style tag) এবং ইনলাইন স্টাইলিং (inline styling)। এই পদ্ধতিগুলোর মাধ্যমে ওয়েব পেজের ডিজাইন এবং লেআউট পরিবর্তন করা যায়। নিচে উভয় পদ্ধতির বিস্তারিত ব্যাখ্যা করা হলো।
১. স্টাইল ট্যাগ ব্যবহার (Style Tag)
স্টাইল ট্যাগটি HTML বা XHTML ডকুমেন্টের <head> সেকশনে সংযুক্ত করা হয় এবং CSS (Cascading Style Sheets) কোডগুলো সেখানে লেখা হয়। এই পদ্ধতিতে, একটি স্টাইল সীট একাধিক HTML বা XHTML উপাদানে প্রয়োগ করা যেতে পারে।
১.১ স্টাইল ট্যাগের গঠন
<head>
<style type="text/css">
/* CSS কোড এখানে লেখা হবে */
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
h1 {
color: #333333;
text-align: center;
}
</style>
</head>
১.২ কোড ব্যাখ্যা
<style>ট্যাগটি<head>সেকশনে অবস্থান করে এবং এতে CSS কোড লেখা হয়।type="text/css"অ্যাট্রিবিউটটি বলে দেয় যে এটি একটি CSS কোড ব্লক।- CSS সিলেক্টর (যেমন,
body,h1) এবং তাদের স্টাইল রুলস (যেমন,background-color,font-family) ডিফাইন করা হয়।
১.৩ উদাহরণ
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8" />
<title>XHTML Example with Style Tag</title>
<style type="text/css">
body {
background-color: #f4f4f4;
font-family: 'Arial', sans-serif;
}
h1 {
color: #2e6da4;
text-align: center;
}
p {
font-size: 16px;
line-height: 1.6;
}
</style>
</head>
<body>
<h1>Welcome to My XHTML Page</h1>
<p>This page demonstrates the use of style tags in XHTML.</p>
</body>
</html>
এই কোডে, <style> ট্যাগের মাধ্যমে body, h1, এবং p ট্যাগের স্টাইলিং করা হয়েছে। <style> ট্যাগের মাধ্যমে একাধিক উপাদানকে স্টাইল দেওয়া সম্ভব।
২. ইনলাইন স্টাইলিং (Inline Styling)
ইনলাইন স্টাইলিং হল যখন আপনি CSS কোডটি সরাসরি HTML বা XHTML ট্যাগের মধ্যে style অ্যাট্রিবিউট ব্যবহার করে প্রয়োগ করেন। এই পদ্ধতিতে শুধুমাত্র একটি নির্দিষ্ট উপাদানকে স্টাইল করা হয়।
২.১ ইনলাইন স্টাইলিং-এর গঠন
<tagname style="property:value;">
Content here
</tagname>
২.২ ইনলাইন স্টাইলিং-এর উদাহরণ
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8" />
<title>XHTML Example with Inline Styling</title>
</head>
<body>
<h1 style="color: #2e6da4; text-align: center;">Welcome to My XHTML Page</h1>
<p style="font-size: 16px; line-height: 1.6;">This page demonstrates the use of inline styling in XHTML.</p>
</body>
</html>
২.৩ কোড ব্যাখ্যা
- এখানে
styleঅ্যাট্রিবিউট ব্যবহার করেh1এবংpট্যাগের স্টাইল সোজাসুজি ডিফাইন করা হয়েছে। - উদাহরণস্বরূপ,
h1ট্যাগের জন্যcolorএবংtext-alignপ্রোপার্টি সেট করা হয়েছে, এবংpট্যাগের জন্যfont-sizeএবংline-heightপ্রোপার্টি ব্যবহৃত হয়েছে।
৩. স্টাইল ট্যাগ এবং ইনলাইন স্টাইলিং-এর তুলনা
| প্যারামিটার | স্টাইল ট্যাগ | ইনলাইন স্টাইলিং |
|---|---|---|
| প্রয়োগের স্থান | <head> সেকশনে, পৃষ্ঠার বিভিন্ন অংশে প্রয়োগযোগ্য | প্রতিটি ট্যাগের মধ্যে স্টাইল কোড লেখা হয় |
| ব্যবহার | একাধিক উপাদানে একই স্টাইল প্রয়োগ করা যায় | একটি নির্দিষ্ট উপাদানে স্টাইল প্রয়োগ করা যায় |
| কোডের সাদৃশ্য | আরও পরিচ্ছন্ন এবং পুনঃব্যবহারযোগ্য | কোডের পুনঃব্যবহারযোগ্যতা কম |
| পারফরম্যান্স | পারফরম্যান্সের দিক থেকে ভালো (একাধিক ট্যাগের জন্য একটি স্টাইল) | একাধিক স্টাইল কোড থাকলে এটি পারফরম্যান্সে প্রভাব ফেলতে পারে |
৪. কখন কোন পদ্ধতি ব্যবহার করবেন?
- স্টাইল ট্যাগ ব্যবহার করা উচিত যখন:
- একটি পেজে একাধিক উপাদান একই স্টাইল শেয়ার করে।
- আপনি কোডে পরিবর্তন আনতে চান, কিন্তু একাধিক এলিমেন্টে তা প্রভাবিত করতে চান।
- ওয়েব পেজের স্টাইলগুলি একত্রিতভাবে রাখতে চান।
- ইনলাইন স্টাইলিং ব্যবহার করা উচিত যখন:
- কোনো নির্দিষ্ট উপাদানে স্টাইল প্রয়োগ করতে চান, এবং তা অন্য কোনো উপাদানে প্রভাব ফেলবে না।
- আপনি খুবই ছোট পৃষ্ঠায় কাজ করছেন, যেখানে স্টাইলিং বেশি প্রয়োজন নয়।
স্টাইল ট্যাগ এবং ইনলাইন স্টাইলিং উভয়ই XHTML ডকুমেন্টে CSS প্রয়োগের দুটি গুরুত্বপূর্ণ পদ্ধতি। স্টাইল ট্যাগটি পৃষ্ঠার বিভিন্ন অংশে একই স্টাইল প্রয়োগ করার জন্য উপযুক্ত, যখন ইনলাইন স্টাইলিং একটি নির্দিষ্ট উপাদানে স্টাইল প্রয়োগের জন্য ব্যবহৃত হয়। উভয়েরই নিজস্ব সুবিধা এবং সীমাবদ্ধতা রয়েছে, এবং সঠিক পদ্ধতি বেছে নেওয়া আপনার প্রকল্পের চাহিদার ওপর নির্ভর করে।
Read more
